<template>
	<view v-if="list.r || list.note" class="card" @click="itemClick(list)">
		    <text class="p">{{list.r?list.r.n:list.note.title}}</text>
			<view class="author">
				<text>{{list.r?list.r.a.n:list.note.author.n}}</text>
				<view class="eye" v-if="list.r">
					<image style="width: 15px;height: 15px;" src="/static/images/眼睛.png"></image>
					<text class="data">{{list.r.vc}}</text>
					<image style="width: 12px;height: 12px" src="/static/images/星.png"></image>
					<text class="data">{{list.r.fc}}</text>
				</view>
			</view>
			<view class="img">
				<image lazy-load="true" mode="widthFix" style="background-color: #eeeeee;width: 100%; height: 150px;" :src="list.r?list.r.img:list.note.image_u"></image>
			</view>
			<image src="/static/images/play.png"  style="width: 50px;height: 50px;position: absolute;top: 50%;right: 50%;transform: translate(50%,25%)" v-if="list.r? list.r.vu : list.note.media_type"></image>
	</view>
</template>


<script>
	export default {
		name:"HomeCard",
		props:["list"],
		data() {
			return {
				
			}	
		},
		methods:{
			itemClick(item) {
				if(item.r){
					// console.log(item.r.id)
					uni.navigateTo({
						url: "../../pages/MenuDetail/MenuDetail?id=" + item.r.id,
					});
				}
				else{
					// console.log(item.note.id);
					uni.navigateTo({
						url: "../../pages/NoteDeatil/NoteDeatil?id=" + item.note.id,
					});
				}
			}
		}
	}
</script>

<style lang="less">
.card{
	margin-top: 30px;
	position: relative;
	.p{
		height: 24px;
		display: block;
		white-space:nowrap;
		overflow: hidden;
		text-overflow:ellipsis;
		font-weight: 600;
		font-size: 16px;
	}
	.author{
		display: flex;
		justify-content: space-between;
		margin: 10px 0;
		color: #5a5757;
		.eye{
			display: flex;
			align-items: center;
			.data{
				margin-right: 5px;
				margin-left: 2px;
				font-size: 12px;
			}
		}
	}
	.img{
		width: 100%;
		height: 150px;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

</style>
